import React from "react";
import { View, Text } from "@tarojs/components";
import { Icon } from "../Icon";

import './index.scss'
import { ButtonEle, ButtonType } from "../Buttton";

export interface ISubmitBarEleProps {

    tip?: string
    tipIcon?: string
    type?: number
    price: number | string
    label?: string
    loading?: boolean
    disabled?: boolean
    buttonText?: string
    currency?: string
    suffixLabel?: string
    safeAreaInsetBottom: boolean
    onSubmit?: () => void
}
export const SubmitBarEle: React.FC<ISubmitBarEleProps> = (props) => {

    const { disabled = false } = props;

    return (<View className="xxm-submitbar-ls">
        <View className="xxm-submitbar-ls__tip">
            {props.tipIcon && <Icon
                size={12}
                name={props.tipIcon}
            />
            }
            {props.tip && <View className="xxm-submitbar-ls__tip-text">
                {props.tip}
            </View>}
        </View>

        <View className="xxm-submitbar-ls__bar">
            {props.price !== null && props.price !== undefined &&
                <View className="xxm-submitbar-ls__text">
                    <Text>{props.label || '合计：'}</Text>
                    <Text className="xxm-submitbar-ls__price">
                        <Text className="xxm-submitbar-ls__currency">{props.currency} </Text>
                        <Text className="xxm-submitbar-ls__price-integer">{props.price}</Text>
                    </Text>
                    <Text className="xxm-submitbar-ls__suffix-label">{props.suffixLabel}</Text>
                </View>
            }

            <ButtonEle
                customClass="xxm-submitbar-ls__button"
                type={ButtonType.PRI}
                //    style={{padding: '0 10px'}}
                // size="small"
                square
                disabled={disabled}
                //    round
                onClick={() => {
                    props.onSubmit && props.onSubmit()
                }}>
                {props.buttonText}
            </ButtonEle>
        </View>
        {props.safeAreaInsetBottom && <View className="xxm-submitbar-ls__safe" />}
    </View>
    )

}